<template>
    <div class="info-data-list">
        <div class="info-box">
            <div class="warehouse-info-box">
                <div class="info-img-box">
                    <div class="img-box">
                        <img :src="ckInfo.imgs || goodsImg" alt="" />
                    </div>
                </div>
                <div class="info-txt-box">
                    <div class="info-txt">
                        <span class="title">仓库名称：</span>
                        <span class="name">{{ ckInfo.name }}</span>
                    </div>
                    <div class="info-txt">
                        <span class="title">库存数量：</span>
                        <span class="name">{{ ckInfo.qty }}</span>
                    </div>
                    <div class="info-txt">
                        <span class="title">库存金额：</span>
                        <span class="name">{{ ckInfo.amount }}</span>
                    </div>
                </div>
                <div class="info-txt-box">
                    <div class="info-txt">
                        <span class="title">负责人：</span>
                        <span class="name">{{ ckInfo.uid_mname }}</span>
                    </div>
                    <div class="info-txt">
                        <span class="title">地址：</span>
                        <span class="name">{{ ckInfo.address }}</span>
                    </div>
                    <div class="info-txt">
                        <span class="title">备注：</span>
                        <span class="name">{{ ckInfo.txt }}</span>
                    </div>
                </div>
            </div>
            <div class="warehouse-list">
                <div class="list-data-title">
                    <div class="title-1"><span>存货统计</span></div>
                    <div class="title-2"><span>占比</span></div>
                    <div class="title-3"><span>金额</span></div>
                </div>
                <div class="list-data-box comm-list">
                    <div
                        class="list-row"
                        v-for="item_1 in ckdata_info_list"
                        :key="item_1.catid"
                    >
                        <div class="list-data-1" @click="forward(item_1)">
                            <div class="data-1">
                                <span>{{ item_1.cat_name }}</span>
                            </div>
                            <div class="data-2">
                                <span>{{ item_1.percent }}%</span>
                            </div>
                            <div class="data-3">
                                <span>{{ item_1.amount }}</span
                                ><i class="el-icon-arrow-right"></i>
                            </div>
                        </div>
                        <div
                            class="list-row"
                            v-for="item_2 in item_1.sub"
                            :key="item_2.catid"
                        >
                            <div class="list-data-2" @click="forward(item_2)">
                                <div class="data-1">
                                    <span>{{ item_2.cat_name }}</span>
                                </div>
                                <div class="data-2">
                                    <span>{{ item_2.percent }}%</span>
                                </div>
                                <div class="data-3">
                                    <span>{{ item_2.amount }}</span
                                    ><i class="el-icon-arrow-right"></i>
                                </div>
                            </div>
                            <div
                                class="list-row"
                                v-for="item_3 in item_2.sub"
                                :key="item_3.catid"
                            >
                                <div
                                    class="list-data-3"
                                    @click="forward(item_3)"
                                >
                                    <div class="data-1">
                                        <span>{{ item_3.cat_name }}</span>
                                    </div>
                                    <div class="data-2">
                                        <span>{{ item_3.percent }}%</span>
                                    </div>
                                    <div class="data-3">
                                        <span>{{ item_3.amount }}</span
                                        ><i class="el-icon-arrow-right"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import staticConst from "../../js/const/StaticConst.js";

export default {
    name: "infoDataList",
    props: ["ckdata_info_list", "ckInfo"],
    data() {
        return {
            goodsImg: staticConst.GOOD_IMG,
        };
    },
    methods: {
        forward(item) {
            this.$emit("forward", item);
        },
    },
};
</script>

<style lang="scss" scoped>
.info-box {
    padding: 10px;
    .warehouse-info-box {
        .info-img-box {
            border-bottom: 1px #eeeeee solid;
            margin-bottom: 10px;
            padding-bottom: 10px;
            .img-box {
                width: 80px;
                height: 80px;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 5px;
                }
            }
        }

        .info-txt-box {
            border-bottom: 1px #eeeeee solid;
            margin-bottom: 10px;
            padding-bottom: 10px;
            .info-txt {
                margin-bottom: 5px;
                font-size: 14px;

                .title {
                    margin-right: 20px;
                    color: #525252;
                    display: inline-block;
                    width: 80px;
                    text-align-last: justify;
                    text-align: justify;
                }
                .name {
                    color: #686868;
                }
            }
        }
    }
    .warehouse-list {
        .list-data-title {
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #f2f2f2;
            color: #a6a6a6;
            text-align: center;
            padding: 0 10px;
            font-size: 14px;
            .title-1 {
                text-align: left;
            }
            .title-3 {
                text-align: right;
            }
        }
        .list-data-box {
            height: 485px;
            overflow: auto;
            .list-row {
                margin-top: 10px;

                .data-1 {
                    flex: 1;
                }
                .data-2 {
                    text-align: center;
                    flex: 1;
                }
                .data-3 {
                    text-align: right;
                    flex: 1;
                    span {
                        margin-right: 10px;
                    }
                }
            }
            .list-data-1 {
                height: 35px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-left: 10px;
                cursor: pointer;
                .data-2 {
                    padding-left: 20px;
                }
                &:hover {
                    background: #f8f8f8;
                }
            }
            .list-data-2 {
                height: 35px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-left: 20px;
                cursor: pointer;
                .data-1 {
                    span {
                        margin-left: 10px;
                    }
                }
                .data-2 {
                    padding-left: 10px;
                }
                &:hover {
                    background: #f8f8f8;
                }
            }
            .list-data-3 {
                height: 35px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-left: 30px;
                cursor: pointer;
                .data-1 {
                    span {
                        margin-left: 20px;
                    }
                }

                &:hover {
                    background: #f8f8f8;
                }
            }
        }
    }
}
</style>